/**
 * create by young (young2f@outlook.com) on 2020/9/16
 */


'use strict';
import React from 'react';
import {Button, Form, Input, InputNumber, Modal, notification, Upload} from 'antd';

import {FormField, FormLayout, ModalFooter} from 'antd-extra';
import FormBase from '../../../components/Base/FormBase';
import {connect} from "dva";
import moment from 'moment';
import 'moment/locale/zh-cn';
import ViewTitle from "../../../components/ViewTitle";
import notify from "../../../components/NotificationExtra";

moment.locale('zh-cn');
const table = 'Customer';
@Form.create()
@connect(({user, global, dynamicLabel, customer}) => ({...user, ...customer, ...dynamicLabel, ...global}))
export default class ModalCreateOrEditBankAccount extends FormBase {
  constructor(props) {
    super(props);
    const {values = {}} = this.props;
    const {fileList = []}=values;
    this.state = {fileList};
  }

  renderFoot = () => {
    const {foot, value, modalRef, callback, form} = this.props;

    if (foot) {
      return foot(value, modalRef);
    } else {
      return (
        <ModalFooter>
          <Button type="primary" onClick={() => {
            form.validateFields((err, values) => {
              if (err) {
                const {code} = err;
                const {errors} = code;
                errors.forEach(item => {
                  notification.error(item);
                });
                return;
              }
              const {fileList = []} = this.state;
              values.code = this.props.values ? this.props.values.code : "ACC" + moment().format('YYYYMMDDHHmmss');

              values.fileList = fileList;

              callback(values);
              modalRef.close();
            });
          }}>确定</Button>
          <Button onClick={() => {
            modalRef.close();
          }}>取消</Button>
        </ModalFooter>
      );
    }
  };

  picHandleCancel = () => this.setState({previewVisible: false});
  picHandlePreview = async file => {
    if (!file.url && !file.preview) {
      file.preview = await this.getBase64(file.originFileObj);
      console.log(file.preview);
    }
    const temp = this.state;

    temp['previewImage'] = file.url || file.preview;
    temp['previewVisible'] = true;
    this.setState({...temp});
  };
  picHandleChange = ({fileList}) => {
    _.map(fileList, async file => {
      if (!file.url && !file.preview) {
        file.preview = await this.getBase64(file.originFileObj);
        //file.thumbUrl = file.response ? file.response.data : fileList.file.thumbUrl;
      }
    });
    const temp = this.state;
    temp.fileList = fileList;
    this.setState({...temp});
  };

  render() {
    const {form, style, values = {}, cols = 2} = this.props;
    const {accountName, openingBank, account, initBalance,balance} = values;
    const {previewVisible, previewImage, fileList = []} = this.state;
    return (
      <div style={{...style}}>
        {<FormLayout form={form} cols={cols}>
          <FormField
            label={'户名'}
            name={'accountName'}
            initialValue={accountName}
            required={true}
          >
            <Input style={{width: '100%'}}
            ></Input></FormField>
          <FormField
            label={'开户行'}
            name={'openingBank'}
            initialValue={openingBank}

          >
            <Input style={{width: '100%'}}
            ></Input></FormField>
          <FormField
            label={'账号'}
            name={'account'}
            initialValue={account}
          >
            <Input style={{width: '100%'}}
            ></Input></FormField>
          <FormField
            label={'初始余额'}
            name={'initBalance'}
            initialValue={initBalance}
          >
            <InputNumber style={{width: '100%'}}
            ></InputNumber></FormField>
          <FormField
            label={'当前结余'}
            name={'balance'}
            initialValue={balance}
          >
            <InputNumber style={{width: '100%'}}
            ></InputNumber></FormField>
        </FormLayout>}
        <ViewTitle
          title={'账户初始金额凭证'}
        ></ViewTitle>

        <div style={{marginLeft: '64px'}}>
          <Upload
            action={'http://127.0.0.1:18008/api/global/upload?type=inboundLot'} // 没有用，直接存图片流文件
            listType="picture-card"
            fileList={fileList}
            accept={".png,.jpg"}
            onPreview={this.picHandlePreview}
            onChange={this.picHandleChange}
            onDownload={file => {
              console.log('ondownlad', file);
            }}
            beforeUpload={(file, fileList) => {
              const isLt2M = file.size / 1024 / 1024 < 2;
              console.log('file size', file.size, isLt2M);
              if (!isLt2M) {
                notify({type: 'error', message: '文件过大！'});
                return isLt2M;
              }
              return false;
            }}
          >
            {this.getUploadPicButton()}
          </Upload>
          <Modal visible={previewVisible} footer={null} onCancel={this.picHandleCancel}>
            <img alt="example" style={{width: '100%'}} src={previewImage}/>
          </Modal>
        </div>
        {this.renderFoot()}
      </div>

    );
  }
}

